<template>
  <div class="custom-report">
    <!-- 自定义报表生成器 -->
    <el-card>
      <div slot="header">自定义报表生成器
        <el-tooltip placement="top" popper-class="custom-report-tutorial-tooltip">
          <div slot="content" style="max-width: 800px; line-height: 1.5;">
            <!-- 小白课堂内容 -->
            <div class="tutorial-content-tooltip">
              <div style="text-align: center; margin-bottom: 20px;">
                <h3 style="margin: 0; color: #409EFF; display: flex; align-items: center; justify-content: center; gap: 8px;">
                  <i class="el-icon-reading"></i>
                  📚 小白课堂：自定义报表使用指南
                </h3>
              </div>

              <div class="tutorial-sections">
                <!-- 基础概念 -->
                <div class="tutorial-section-tooltip">
                  <h4><i class="el-icon-info" style="color: #E6A23C;"></i> 什么是自定义报表？</h4>
                  <p>自定义报表是一个强大的数据分析工具，让您可以：</p>
                  <ul>
                    <li>🔍 <strong>多维度分析</strong>：从时间、商户、活动等角度分析数据</li>
                    <li>📊 <strong>跨数据源整合</strong>：同时分析用户、积分、佣金、订单、保证金数据</li>
                    <li>📈 <strong>灵活图表展示</strong>：支持柱状图、折线图、饼图、混合图表</li>
                    <li>⚡ <strong>实时生成</strong>：根据您的配置实时生成个性化报表</li>
                  </ul>
                </div>

                <!-- 配置步骤 -->
                <div class="tutorial-section-tooltip">
                  <h4><i class="el-icon-setting" style="color: #67C23A;"></i> 如何配置报表？</h4>
                  <div class="tutorial-steps-tooltip">
                    <div class="step-item-tooltip">
                      <span class="step-number-tooltip">1</span>
                      <div class="step-content-tooltip">
                        <strong>选择数据源</strong> - 选择要分析的数据类型，可多选：
                        <div style="margin-top: 4px; color: #374151;">
                          <span class="tag-tooltip">用户数据</span> <span style="color: #374151;">用户行为分析</span> |
                          <span class="tag-tooltip">积分数据</span> <span style="color: #374151;">积分流动分析</span> |
                          <span class="tag-tooltip">佣金数据</span> <span style="color: #374151;">收入分析</span> |
                          <span class="tag-tooltip">订单数据</span> <span style="color: #374151;">交易分析</span> |
                          <span class="tag-tooltip">保证金数据</span> <span style="color: #374151;">资金分析</span>
                        </div>
                      </div>
                    </div>

                    <div class="step-item-tooltip">
                      <span class="step-number-tooltip">2</span>
                      <div class="step-content-tooltip">
                        <strong>设置统计维度</strong> - 选择数据的分组方式：
                        <div style="margin-top: 4px; color: #374151;">
                          <span class="tag-tooltip">时间维度</span> <span style="color: #374151;">按日期分析趋势</span> |
                          <span class="tag-tooltip">商户维度</span> <span style="color: #374151;">按商户对比分析</span> |
                          <span class="tag-tooltip">活动维度</span> <span style="color: #374151;">按活动效果分析</span>
                        </div>
                      </div>
                    </div>

                    <div class="step-item-tooltip">
                      <span class="step-number-tooltip">3</span>
                      <div class="step-content-tooltip">
                        <strong>选择分析指标</strong> - 选择要计算的统计指标：
                        <div style="margin-top: 4px; color: #374151;">
                          <span class="tag-tooltip">数量统计</span> <span style="color: #374151;">记录总数</span> |
                          <span class="tag-tooltip">求和统计</span> <span style="color: #374151;">数值总和</span> |
                          <span class="tag-tooltip">平均值</span> <span style="color: #374151;">平均水平</span> |
                          <span class="tag-tooltip">最大/最小值</span> <span style="color: #374151;">极值分析</span>
                        </div>
                      </div>
                    </div>

                    <div class="step-item-tooltip">
                      <span class="step-number-tooltip">4</span>
                      <div class="step-content-tooltip">
                        <strong>选择图表类型</strong> - 选择最适合的展示方式：
                        <div style="margin-top: 4px; color: #374151;">
                          <span class="tag-tooltip">柱状图</span> <span style="color: #374151;">对比分析</span> |
                          <span class="tag-tooltip">折线图</span> <span style="color: #374151;">趋势分析</span> |
                          <span class="tag-tooltip">饼图</span> <span style="color: #374151;">占比分析</span> |
                          <span class="tag-tooltip">混合图表</span> <span style="color: #374151;">综合分析</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 实用场景 -->
                <div class="tutorial-section-tooltip">
                  <h4><i class="el-icon-star-on" style="color: #F56C6C;"></i> 实用场景示例</h4>
                  <div class="scenario-examples-tooltip">
                    <div class="scenario-item-tooltip">
                      <strong style="color: #1E293B;">📈 商户绩效分析</strong> <span style="color: #1E293B;">- 佣金数据 + 商户维度 + 求和统计 + 柱状图 → 分析各商户的佣金贡献，识别优质商户</span>
                    </div>
                    <div class="scenario-item-tooltip">
                      <strong style="color: #1E293B;">📊 积分使用趋势</strong> <span style="color: #1E293B;">- 积分数据 + 时间维度 + 数量统计 + 折线图 → 分析积分发放和消费的时间趋势</span>
                    </div>
                    <div class="scenario-item-tooltip">
                      <strong style="color: #1E293B;">🎯 活动效果评估</strong> <span style="color: #1E293B;">- 用户数据+订单数据 + 活动维度 + 平均值 + 混合图表 → 评估不同活动的用户参与度和转化效果</span>
                    </div>
                    <div class="scenario-item-tooltip">
                      <strong style="color: #1E293B;">💰 资金流动分析</strong> <span style="color: #1E293B;">- 保证金数据 + 时间维度 + 求和统计 + 折线图 → 监控保证金的充值、使用和退款趋势</span>
                    </div>
                  </div>
                </div>

                <!-- 使用技巧 -->
                <div class="tutorial-tips-tooltip">
                  <h4 style="color: #92400E;">💡 使用技巧</h4>
                  <ul>
                    <li style="color: #78350F;">先从单一数据源开始，熟悉后再尝试多数据源组合</li>
                    <li style="color: #78350F;">时间维度适合趋势分析，商户维度适合对比分析</li>
                    <li style="color: #78350F;">饼图适合展示占比，折线图适合展示趋势</li>
                    <li style="color: #78350F;">可以保存常用的报表配置，提高工作效率</li>
                  </ul>
                </div>
              </div>
            </div>

            <div style="margin-top: 15px; padding-top: 15px; border-top: 1px solid #E4E7ED;">
              <div><strong>功能说明：</strong>灵活配置数据源、维度和指标，生成个性化数据报表</div>
              <div><strong>使用场景：</strong>深度数据分析、自定义业务洞察、跨领域数据整合</div>
              <div><strong>配置步骤：</strong>选择数据源 → 设置统计维度 → 选择分析指标 → 生成报表</div>
            </div>
          </div>
          <i class="el-icon-question" style="margin-left:6px;color:#909399;"></i>
        </el-tooltip>
      </div>
      <el-form :model="customReportForm" label-width="120px">
        <el-form-item label="报表名称">
          <el-input 
            v-model="customReportForm.report_name" 
            placeholder="请输入报表名称，如：2024年积分消费分析报表">
            <template slot="prepend">📊</template>
          </el-input>
        </el-form-item>
        
        <el-form-item label="数据源">
          <el-checkbox-group v-model="customReportForm.data_sources">
            <el-checkbox label="users">
              <span style="margin-left: 8px;">用户数据</span>
              <el-tooltip placement="top">
                <div slot="content" style="max-width: 400px; line-height: 1.5;">
                  <div><strong>数据范围：</strong>用户注册、登录、活跃行为等基础用户数据</div>
                  <div><strong>关键指标：</strong>新增用户、活跃用户、留存率、用户画像</div>
                  <div><strong>分析维度：</strong>时间趋势、地区分布、用户类型、行为特征</div>
                  <div><strong>应用场景：</strong>用户增长分析、活跃度监控、用户画像构建</div>
                </div>
                <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
              </el-tooltip>
            </el-checkbox>
            <el-checkbox label="points">
              <span style="margin-left: 8px;">积分数据</span>
              <el-tooltip placement="top">
                <div slot="content" style="max-width: 400px; line-height: 1.5;">
                  <div><strong>数据范围：</strong>积分发放、消费、余额、过期等完整积分生命周期</div>
                  <div><strong>关键指标：</strong>发放总量、消费率、人均积分、积分流动性</div>
                  <div><strong>分析维度：</strong>积分类型、商户维度、用户群体、时间周期</div>
                  <div><strong>应用场景：</strong>积分成本分析、用户激励效果、运营策略优化</div>
                </div>
                <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
              </el-tooltip>
            </el-checkbox>
            <el-checkbox label="commission">
              <span style="margin-left: 8px;">佣金数据</span>
              <el-tooltip placement="top">
                <div slot="content" style="max-width: 400px; line-height: 1.5;">
                  <div><strong>数据范围：</strong>佣金产生、结算状态、商户分布、订单关联</div>
                  <div><strong>关键指标：</strong>佣金总额、结算效率、平均佣金、商户贡献度</div>
                  <div><strong>分析维度：</strong>商户排行、时间趋势、结算周期、佣金类型</div>
                  <div><strong>应用场景：</strong>收入分析、商户绩效评估、结算效率监控</div>
                </div>
                <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
              </el-tooltip>
            </el-checkbox>
            <el-checkbox label="orders">
              <span style="margin-left: 8px;">订单数据</span>
              <el-tooltip placement="top">
                <div slot="content" style="max-width: 400px; line-height: 1.5;">
                  <div><strong>数据范围：</strong>订单创建、支付、完成、取消等订单全生命周期</div>
                  <div><strong>关键指标：</strong>订单量、成功率、平均金额、转化率</div>
                  <div><strong>分析维度：</strong>时间趋势、商户分布、用户行为、订单类型</div>
                  <div><strong>应用场景：</strong>业务分析、转化优化、商户绩效评估</div>
                </div>
                <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
              </el-tooltip>
            </el-checkbox>
            <el-checkbox label="deposit">
              <span style="margin-left: 8px;">保证金数据</span>
              <el-tooltip placement="top">
                <div slot="content" style="max-width: 400px; line-height: 1.5;">
                  <div><strong>数据范围：</strong>保证金充值、使用、冻结、退款等资金流转</div>
                  <div><strong>关键指标：</strong>充值总额、使用率、冻结金额、资金周转</div>
                  <div><strong>分析维度：</strong>商户分布、时间趋势、资金类型、流动性分析</div>
                  <div><strong>应用场景：</strong>资金管理、风险控制、商户信用评估</div>
                </div>
                <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
              </el-tooltip>
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        
        <el-form-item label="统计维度">
          <el-checkbox-group v-model="customReportForm.dimensions">
            <el-checkbox label="time">
              <span style="margin-left: 8px;">时间维度</span>
              <el-tooltip placement="top">
                <div slot="content" style="max-width: 380px; line-height: 1.5;">
                  <div><strong>分析粒度：</strong>按日、周、月、季度、年度等时间维度统计</div>
                  <div><strong>适用场景：</strong>趋势分析、周期性规律发现、同比环比分析</div>
                  <div><strong>输出形式：</strong>时间序列图表、趋势线、增长率曲线</div>
                </div>
                <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
              </el-tooltip>
            </el-checkbox>
            <el-checkbox label="merchant">
              <span style="margin-left: 8px;">商户维度</span>
              <el-tooltip placement="top">
                <div slot="content" style="max-width: 380px; line-height: 1.5;">
                  <div><strong>分析范围：</strong>按商户ID、商户类型、商户等级等维度分组</div>
                  <div><strong>适用场景：</strong>商户绩效排行、贡献度分析、商户画像构建</div>
                  <div><strong>输出形式：</strong>排行榜、贡献占比饼图、商户对比柱状图</div>
                </div>
                <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
              </el-tooltip>
            </el-checkbox>
            <el-checkbox label="campaign">
              <span style="margin-left: 8px;">活动维度</span>
              <el-tooltip placement="top">
                <div slot="content" style="max-width: 380px; line-height: 1.5;">
                  <div><strong>分析范围：</strong>按活动ID、活动类型、活动周期等维度分组</div>
                  <div><strong>适用场景：</strong>活动效果对比、ROI分析、活动优化建议</div>
                  <div><strong>输出形式：</strong>活动效果对比表、转化漏斗图、成本效益分析</div>
                </div>
                <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
              </el-tooltip>
            </el-checkbox>
            <el-checkbox label="user_type">
              <span style="margin-left: 8px;">用户类型</span>
              <el-tooltip placement="top">
                <div slot="content" style="max-width: 380px; line-height: 1.5;">
                  <div><strong>分析范围：</strong>新用户、老用户、活跃用户、流失用户等用户分群</div>
                  <div><strong>适用场景：</strong>用户行为差异分析、精准营销、用户生命周期管理</div>
                  <div><strong>输出形式：</strong>用户群体对比、行为模式分析、价值贡献分布</div>
                </div>
                <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
              </el-tooltip>
            </el-checkbox>
            <el-checkbox label="region">
              <span style="margin-left: 8px;">地区维度</span>
              <el-tooltip placement="top">
                <div slot="content" style="max-width: 380px; line-height: 1.5;">
                  <div><strong>分析范围：</strong>按省市、地区、城市等级等地理维度分组</div>
                  <div><strong>适用场景：</strong>区域市场分析、地域化运营策略、市场渗透率</div>
                  <div><strong>输出形式：</strong>地图热力图、区域排行榜、市场占有率分析</div>
                </div>
                <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
              </el-tooltip>
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        
        <el-form-item label="统计指标">
          <el-checkbox-group v-model="customReportForm.metrics">
            <el-checkbox label="count">
              <span style="margin-left: 8px;">数量统计</span>
              <el-tooltip placement="top">
                <div slot="content" style="max-width: 380px; line-height: 1.5;">
                  <div><strong>统计方式：</strong>COUNT() 计数统计，统计记录数量、用户数量等</div>
                  <div><strong>适用场景：</strong>用户数量、订单笔数、活动参与次数等基础计数</div>
                  <div><strong>输出示例：</strong>新增用户1,250人、订单总数3,580笔</div>
                </div>
                <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
              </el-tooltip>
            </el-checkbox>
            <el-checkbox label="sum">
              <span style="margin-left: 8px;">求和统计</span>
              <el-tooltip placement="top">
                <div slot="content" style="max-width: 380px; line-height: 1.5;">
                  <div><strong>统计方式：</strong>SUM() 金额汇总，统计总金额、总积分等累计值</div>
                  <div><strong>适用场景：</strong>佣金总额、积分发放量、保证金充值总额等</div>
                  <div><strong>输出示例：</strong>佣金总额￥125,680、积分发放58,240分</div>
                </div>
                <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
              </el-tooltip>
            </el-checkbox>
            <el-checkbox label="avg">
              <span style="margin-left: 8px;">平均值</span>
              <el-tooltip placement="top">
                <div slot="content" style="max-width: 380px; line-height: 1.5;">
                  <div><strong>统计方式：</strong>AVG() 平均值计算，统计人均、单笔平均等指标</div>
                  <div><strong>适用场景：</strong>人均积分、平均佣金、平均订单金额等</div>
                  <div><strong>输出示例：</strong>人均积分185分、平均佣金￥35.2</div>
                </div>
                <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
              </el-tooltip>
            </el-checkbox>
            <el-checkbox label="rate">
              <span style="margin-left: 8px;">转化率</span>
              <el-tooltip placement="top">
                <div slot="content" style="max-width: 380px; line-height: 1.5;">
                  <div><strong>统计方式：</strong>比例计算，统计完成率、转化率、占比等百分比指标</div>
                  <div><strong>适用场景：</strong>活动完成率、积分消费率、用户留存率等</div>
                  <div><strong>输出示例：</strong>活动完成率68.5%、积分消费率72.3%</div>
                </div>
                <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
              </el-tooltip>
            </el-checkbox>
            <el-checkbox label="growth">
              <span style="margin-left: 8px;">增长率</span>
              <el-tooltip placement="top">
                <div slot="content" style="max-width: 380px; line-height: 1.5;">
                  <div><strong>统计方式：</strong>同比环比增长计算，统计增长幅度和趋势变化</div>
                  <div><strong>适用场景：</strong>用户增长率、收入增长率、业务发展趋势等</div>
                  <div><strong>输出示例：</strong>用户月增长率+15.8%、佣金环比+8.2%</div>
                </div>
                <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
              </el-tooltip>
            </el-checkbox>
            <el-checkbox label="max">
              <span style="margin-left: 8px;">最大值</span>
              <el-tooltip placement="top">
                <div slot="content" style="max-width: 380px; line-height: 1.5;">
                  <div><strong>统计方式：</strong>MAX() 最大值计算，找出数据集中的最大值</div>
                  <div><strong>适用场景：</strong>最高佣金、最大订单金额、峰值用户数等</div>
                  <div><strong>输出示例：</strong>最高佣金￥1,580、最大订单￥8,900</div>
                </div>
                <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
              </el-tooltip>
            </el-checkbox>
            <el-checkbox label="min">
              <span style="margin-left: 8px;">最小值</span>
              <el-tooltip placement="top">
                <div slot="content" style="max-width: 380px; line-height: 1.5;">
                  <div><strong>统计方式：</strong>MIN() 最小值计算，找出数据集中的最小值</div>
                  <div><strong>适用场景：</strong>最低佣金、最小订单金额、最少活跃用户等</div>
                  <div><strong>输出示例：</strong>最低佣金￥5.5、最小订单￥12</div>
                </div>
                <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
              </el-tooltip>
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        
        <el-form-item label="图表类型">
          <el-radio-group v-model="customReportForm.chart_type">
            <el-radio label="line">
              <span style="margin-left: 8px;">折线图</span>
              <el-tooltip placement="top">
                <div slot="content" style="max-width: 350px; line-height: 1.5;">
                  <div><strong>适用场景：</strong>时间趋势分析、连续数据变化展示</div>
                  <div><strong>推荐用途：</strong>日活趋势、收入变化、增长曲线等</div>
                </div>
                <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
              </el-tooltip>
            </el-radio>
            <el-radio label="bar">
              <span style="margin-left: 8px;">柱状图</span>
              <el-tooltip placement="top">
                <div slot="content" style="max-width: 350px; line-height: 1.5;">
                  <div><strong>适用场景：</strong>分类对比、排行榜、数量比较</div>
                  <div><strong>推荐用途：</strong>商户排行、地区分布、活动对比等</div>
                </div>
                <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
              </el-tooltip>
            </el-radio>
            <el-radio label="pie">
              <span style="margin-left: 8px;">饼图</span>
              <el-tooltip placement="top">
                <div slot="content" style="max-width: 350px; line-height: 1.5;">
                  <div><strong>适用场景：</strong>占比分析、结构组成、份额分布</div>
                  <div><strong>推荐用途：</strong>用户类型分布、收入结构、地区占比等</div>
                </div>
                <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
              </el-tooltip>
            </el-radio>
            <el-radio label="mixed">
              <span style="margin-left: 8px;">混合图表</span>
              <el-tooltip placement="top">
                <div slot="content" style="max-width: 350px; line-height: 1.5;">
                  <div><strong>适用场景：</strong>多指标对比、复合分析、关联展示</div>
                  <div><strong>推荐用途：</strong>收入与用户双轴图、成本效益分析等</div>
                </div>
                <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
              </el-tooltip>
            </el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item>
          <el-button 
            type="primary" 
            @click="handleGenerateCustomReport" 
            :loading="customReportLoading"
            size="medium">
            <i class="el-icon-data-analysis"></i>
            生成报表
          </el-button>
          <el-button 
            @click="handleSaveCustomReport"
            size="medium">
            <i class="el-icon-folder-add"></i>
            保存配置
          </el-button>
          <el-button
            @click="handleResetForm"
            size="medium"
            title="重置表单">
            <i class="el-icon-refresh"></i>
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <!-- 自定义报表结果 -->
    <el-card style="margin-top: 20px;">
      <div slot="header" v-if="customReportResult">
        <span>报表结果</span>
        <span v-if="customReportForm.report_name" style="margin-left: 16px; color: #909399; font-weight: normal;">
          - {{ customReportForm.report_name }}
        </span>
        <el-tooltip placement="top">
          <div slot="content" style="max-width: 420px; line-height: 1.5;">
            <div><strong>生成时间：</strong>{{ new Date().toLocaleString() }}</div>
            <div><strong>数据范围：</strong>{{ getDataSourceDescription() }}</div>
            <div><strong>分析维度：</strong>{{ getDimensionDescription() }}</div>
            <div><strong>统计指标：</strong>{{ getMetricDescription() }}</div>
            <div style="margin-top: 8px; padding: 8px; background: #17a2b8; border-radius: 4px; color: #fff;">
              <div><strong>📈 图表说明：</strong></div>
              <div>基于您选择的配置动态生成，支持交互操作和数据钻取</div>
              <div style="margin-top: 6px;"><strong>操作提示：</strong></div>
              <div>• 鼠标悬停查看详细数据</div>
              <div>• 点击图例可显示/隐藏数据系列</div>
              <div>• 可右键保存图片或导出数据</div>
              <div style="color: #e1ecf4; font-size: 12px;">注：报表数据实时生成，可定期刷新获取最新结果</div>
            </div>
          </div>
          <i class="el-icon-question" style="margin-left:8px;color:#909399;"></i>
        </el-tooltip>
      </div>
      <div slot="header" v-else>
        <span style="color: #909399;">等待生成报表...</span>
      </div>
      <!-- 图表容器始终存在 -->
      <div id="customReportChart" style="height: 600px;" :style="{ visibility: customReportResult ? 'visible' : 'hidden' }"></div>
      
      <!-- 无数据提示 -->
      <div v-if="!customReportResult" style="text-align: center; padding: 50px; color: #909399;">
        <i class="el-icon-pie-chart" style="font-size: 64px; margin-bottom: 16px;"></i>
        <div>请点击"生成报表"按钮来生成自定义报表</div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { nfcReportsAPI } from '@/api/nfc'
import * as echarts from 'echarts'

export default {
  name: 'CustomReport',
  props: {
    filters: { type: Object, required: true }
  },
  data() {
    return {
      customReportLoading: false,
      customReportForm: {
        report_name: '',
        data_sources: [],
        dimensions: [],
        metrics: [],
        chart_type: 'line'
      },
      customReportResult: null,
      chartInstances: {},
      chartResizeObservers: {}
    }
  },
  watch: {
    filters: { handler() { this.loadData() }, deep: true }
  },
  mounted() {
    this.loadSavedConfig()
  },
  beforeDestroy() {
    // 清理图表实例
    Object.values(this.chartInstances).forEach(chart => chart && chart.dispose())
    // 清理尺寸监听器
    Object.values(this.chartResizeObservers).forEach(observer => {
      try {
        observer.disconnect()
      } catch (e) {
        console.warn('断开图表尺寸监听器失败:', e)
      }
    })
  },
  methods: {
    // 加载保存的配置
    loadSavedConfig() {
      try {
        const savedConfig = localStorage.getItem('customReportConfig')
        if (savedConfig) {
          const configData = JSON.parse(savedConfig)
          if (configData && configData.config) {
            this.customReportForm = { ...this.customReportForm, ...configData.config }
          }
        }
      } catch (error) {
        console.warn('加载保存的配置失败:', error)
      }
    },

    // 生成自定义报表
    async handleGenerateCustomReport() {
      if (!this.validateCustomReportForm()) {
        return
      }

      try {
        this.customReportLoading = true
        
        // 构建符合后端期望的参数格式
        const params = {
          ...this.filters,
          // 报表配置信息
          report_config: {
            report_name: this.customReportForm.report_name,
            data_sources: this.customReportForm.data_sources,
            dimensions: this.customReportForm.dimensions,
            metrics: this.customReportForm.metrics,
            chart_type: this.customReportForm.chart_type
          }
        }
        
        console.log('自定义报表请求参数:', params)
        const response = await nfcReportsAPI.getCustomReport(params)
        console.log('自定义报表响应:', response)
        
        if (response && (response.code === 0 || response.code === 200)) {
          this.customReportResult = response.data || {}
          console.log('设置customReportResult成功:', this.customReportResult)
          
          // 使用更长的延迟确保DOM已经更新
          this.$nextTick(() => {
            setTimeout(() => {
              this.renderCustomReportChart()
            }, 100)
          })
          this.$message.success('自定义报表生成成功')
        } else {
          console.warn('自定义报表API返回异常:', response)
          this.$message.error(response?.message || '生成报表失败')
        }
      } catch (error) {
        console.error('生成自定义报表失败：', error)
        this.$message.error('生成报表失败，请稍后重试')
      } finally {
        this.customReportLoading = false
      }
    },

    // 验证表单配置
    validateCustomReportForm() {
      if (!this.customReportForm.report_name || this.customReportForm.report_name.trim() === '') {
        this.$message.warning('请输入报表名称')
        return false
      }
      if (!this.customReportForm.data_sources || this.customReportForm.data_sources.length === 0) {
        this.$message.warning('请至少选择一个数据源')
        return false
      }
      if (!this.customReportForm.dimensions || this.customReportForm.dimensions.length === 0) {
        this.$message.warning('请至少选择一个统计维度')
        return false
      }
      if (!this.customReportForm.metrics || this.customReportForm.metrics.length === 0) {
        this.$message.warning('请至少选择一个统计指标')
        return false
      }
      if (!this.customReportForm.chart_type) {
        this.$message.warning('请选择图表类型')
        return false
      }
      return true
    },

    // 保存报表配置
    async handleSaveCustomReport() {
      if (!this.validateCustomReportForm()) {
        return
      }

      try {
        const configData = {
          config: { ...this.customReportForm },
          result: this.customReportResult,
          timestamp: Date.now(),
          create_time: new Date().toLocaleString()
        }
        
        localStorage.setItem('customReportConfig', JSON.stringify(configData))
        
        // 同时保存到历史记录中
        const historyKey = `customReport_${Date.now()}`
        localStorage.setItem(historyKey, JSON.stringify({
          name: this.customReportForm.report_name,
          config: configData,
          timestamp: Date.now()
        }))
        
        this.$message.success(`报表配置"${this.customReportForm.report_name}"已保存成功`)
      } catch (error) {
        console.error('保存报表配置失败：', error)
        this.$message.error('保存配置失败，请稍后重试')
      }
    },

    // 重置表单
    handleResetForm() {
      this.customReportForm = {
        report_name: '',
        data_sources: [],
        dimensions: [],
        metrics: [],
        chart_type: 'line'
      }
      this.customReportResult = null
      
      // 清理图表实例
      this.clearCustomReportChart()
      
      this.$message.success('表单已重置')
    },

    // 清理自定义报表图表
    clearCustomReportChart() {
      const chartId = 'customReportChart'
      if (this.chartInstances[chartId]) {
        this.chartInstances[chartId].dispose()
        delete this.chartInstances[chartId]
      }
      if (this.chartResizeObservers[chartId]) {
        try {
          this.chartResizeObservers[chartId].disconnect()
        } catch (e) {
          console.warn('断开图表尺寸监听器失败:', e)
        }
        delete this.chartResizeObservers[chartId]
      }
    },

    // 渲染自定义报表图表
    renderCustomReportChart() {
      if (!this.customReportResult) {
        console.warn('自定义报表数据为空，跳过图表渲染')
        return
      }

      console.log('开始渲染自定义报表图表，数据:', this.customReportResult)

      const chartData = this.customReportResult.results || this.customReportResult
      console.log('处理后的图表数据:', chartData)
      console.log('图表类型:', this.customReportForm.chart_type)

      // 对于饼图，数据格式不同，不需要检查series
      if (this.customReportForm.chart_type === 'pie') {
        console.log('饼图模式，跳过series检查')
      } else if (!chartData.series || !Array.isArray(chartData.series)) {
        console.error('图表数据格式错误，缺少series数组:', chartData)
        return
      }

      const chartId = 'customReportChart'
      const chartOption = this.getCustomReportChartOption()
      console.log('图表配置:', chartOption)

      this.renderChart(chartId, chartOption)
    },

    // 获取自定义报表图表配置
    getCustomReportChartOption() {
      const data = this.customReportResult.results || this.customReportResult
      const chartType = this.customReportForm.chart_type
      
      // 基础配置
      const baseOption = {
        title: { 
          text: this.customReportForm.report_name || '自定义报表',
          left: 'center',
          textStyle: { fontSize: 16, fontWeight: 'bold' }
        },
        tooltip: chartType === 'pie' ? {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        } : {
          trigger: 'axis',
          axisPointer: { type: 'cross' },
          formatter: function(params) {
            if (Array.isArray(params) && params.length > 0) {
              let result = `${params[0].name}<br/>`
              params.forEach(param => {
                result += `${param.marker} ${param.seriesName}: ${param.value}<br/>`
              })
              return result
            }
            return ''
          }
        },
        legend: {
          bottom: 0,
          type: 'scroll'
        },
        grid: {
          left: '50px',
          right: '30px',
          bottom: '80px',
          top: '80px',
          containLabel: true
        }
      }

      // 根据图表类型配置
      switch (chartType) {
        case 'line':
          return {
            ...baseOption,
            xAxis: {
              type: 'category',
              data: data.categories || data.labels || [],
              axisLabel: { rotate: 45, interval: 0 }
            },
            yAxis: {
              type: 'value',
              name: this.getYAxisName(),
              axisLabel: { formatter: '{value}' }
            },
            series: this.formatLineSeries(data.series || data.data || [])
          }

        case 'bar':
          return {
            ...baseOption,
            xAxis: {
              type: 'category',
              data: data.categories || data.labels || [],
              axisLabel: { rotate: 45, interval: 0 }
            },
            yAxis: {
              type: 'value',
              name: this.getYAxisName(),
              axisLabel: { formatter: '{value}' }
            },
            series: this.formatBarSeries(data.series || data.data || [])
          }

        case 'pie':
          return {
            ...baseOption,
            grid: undefined,
            series: this.formatPieSeries(data)
          }

        case 'mixed':
          return {
            ...baseOption,
            xAxis: {
              type: 'category',
              data: data.categories || data.labels || [],
              axisLabel: { rotate: 45, interval: 0 }
            },
            yAxis: [
              {
                type: 'value',
                name: this.getYAxisName(),
                position: 'left',
                axisLabel: { formatter: '{value}' }
              },
              {
                type: 'value',
                name: '次要指标',
                position: 'right',
                axisLabel: { formatter: '{value}' }
              }
            ],
            series: this.formatMixedSeries(data.series || data.data || [])
          }

        default:
          return baseOption
      }
    },

    // 格式化折线图系列
    formatLineSeries(data) {
      if (!Array.isArray(data)) return []
      return data.map((item, index) => ({
        name: item.name || `系列${index + 1}`,
        type: 'line',
        data: item.data || item.values || [],
        smooth: true,
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: { width: 2 }
      }))
    },

    // 格式化柱状图系列
    formatBarSeries(data) {
      if (!Array.isArray(data)) return []
      return data.map((item, index) => ({
        name: item.name || `系列${index + 1}`,
        type: 'bar',
        data: item.data || item.values || [],
        barWidth: '60%',
        itemStyle: {
          borderRadius: [2, 2, 0, 0]
        }
      }))
    },

    // 格式化饼图系列
    formatPieSeries(data) {
      console.log('格式化饼图数据:', data)

      let pieData = []

      // 检查数据格式：如果是后端饼图专用格式 [{name, value}, ...]
      if (Array.isArray(data) && data.length > 0 && data[0].hasOwnProperty('name') && data[0].hasOwnProperty('value')) {
        console.log('使用后端饼图格式')
        pieData = data.map(item => {
          const value = Math.abs(Number(item.value)) // 确保值为正数
          console.log(`饼图数据项: ${item.name} = ${value}`)
          return {
            name: item.name,
            value: value
          }
        }).filter(item => item.value > 0) // 过滤掉0值
      }
      // 检查数据格式：如果是标准的 {categories, series} 格式
      else if (data.series && Array.isArray(data.series) && data.categories) {
        console.log('使用标准图表格式转换为饼图')
        const series = data.series[0] // 取第一个系列
        const categories = data.categories
        const values = series.data || series.values || []
        values.forEach((value, index) => {
          pieData.push({
            name: categories[index] || `项目${index + 1}`,
            value: Math.abs(Number(value)) // 确保值为正数
          })
        })
      }
      // 如果没有识别到正确格式，创建默认数据
      else {
        console.warn('饼图数据格式不正确，使用默认数据')
        pieData = [
          { name: '暂无数据', value: 1 }
        ]
      }

      console.log('最终饼图数据:', pieData)

      // 如果没有有效数据，创建一个示例数据避免空白
      if (pieData.length === 0) {
        console.warn('饼图数据为空，使用示例数据')
        pieData = [
          { name: '暂无数据', value: 1 }
        ]
      }

      const pieConfig = {
        name: '占比分析',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '50%'],
        data: pieData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        label: {
          formatter: '{b}: {c} ({d}%)',
          show: true
        },
        labelLine: {
          show: true
        }
      }

      console.log('饼图配置:', pieConfig)
      return [pieConfig]
    },

    // 格式化混合图表系列
    formatMixedSeries(data) {
      if (!Array.isArray(data)) return []
      return data.map((item, index) => ({
        name: item.name || `系列${index + 1}`,
        type: index % 2 === 0 ? 'bar' : 'line',
        yAxisIndex: index % 2,
        data: item.data || item.values || [],
        smooth: true
      }))
    },

    // 获取Y轴名称
    getYAxisName() {
      const metrics = this.customReportForm.metrics || []
      if (metrics.includes('sum')) return '总量'
      if (metrics.includes('count')) return '数量'
      if (metrics.includes('avg')) return '平均值'
      if (metrics.includes('rate')) return '比例(%)'
      if (metrics.includes('growth')) return '增长率(%)'
      if (metrics.includes('max')) return '最大值'
      if (metrics.includes('min')) return '最小值'
      return '数值'
    },

    // 通用图表渲染方法
    renderChart(containerId, option) {
      console.log(`开始渲染图表，容器ID: ${containerId}`)
      console.log('图表配置详情:', JSON.stringify(option, null, 2))

      const container = document.getElementById(containerId)
      if (!container) {
        console.error(`图表容器 ${containerId} 不存在`)
        this.$message.error('图表容器不存在，请刷新页面重试')
        return
      }

      console.log('图表容器找到:', container)
      console.log('容器尺寸:', {
        width: container.offsetWidth,
        height: container.offsetHeight,
        display: window.getComputedStyle(container).display,
        visibility: window.getComputedStyle(container).visibility
      })

      // 清理旧实例与观察器
      if (this.chartInstances[containerId]) {
        console.log('清理旧图表实例')
        this.chartInstances[containerId].dispose()
        this.chartInstances[containerId] = null
      }
      if (this.chartResizeObservers[containerId]) {
        try {
          this.chartResizeObservers[containerId].disconnect()
        } catch (e) {
          console.warn('断开图表尺寸监听器失败:', e)
        }
        delete this.chartResizeObservers[containerId]
      }

      let chart
      try {
        // 初始化图表
        console.log('开始初始化ECharts图表')
        chart = echarts.init(container)
        console.log('ECharts初始化成功:', chart)

        console.log('设置图表配置:', option)
        chart.setOption(option, true) // 添加 true 参数强制重新渲染
        console.log('图表配置设置成功')

        // 强制重新绘制
        setTimeout(() => {
          if (chart && !chart.isDisposed()) {
            chart.resize()
            console.log('图表重新调整尺寸完成')
          }
        }, 100)

        this.chartInstances[containerId] = chart
      } catch (error) {
        console.error('图表渲染失败:', error)
        this.$message.error('图表渲染失败: ' + error.message)
        return
      }
      
      // 添加 ResizeObserver 监听容器尺寸变化
      if (window.ResizeObserver && chart) {
        const observer = new ResizeObserver(() => {
          try {
            chart.resize()
          } catch (e) {
            console.warn('图表自适应失败:', e)
          }
        })
        observer.observe(container)
        this.chartResizeObservers[containerId] = observer
      }
      
      // 防抖处理窗口 resize 事件
      const handleResize = () => {
        clearTimeout(this.resizeTimer)
        this.resizeTimer = setTimeout(() => {
          try {
            if (chart) {
              chart.resize()
            }
          } catch (e) {
            console.warn('窗口 resize 图表适配失败:', e)
          }
        }, 100)
      }
      window.addEventListener('resize', handleResize)
    },

    // 获取数据源描述
    getDataSourceDescription() {
      const sources = this.customReportForm.data_sources || []
      const descriptions = {
        'users': '用户数据',
        'points': '积分数据',
        'commission': '佣金数据',
        'orders': '订单数据',
        'deposit': '保证金数据'
      }
      return sources.map(s => descriptions[s] || s).join('、') || '无'
    },

    // 获取维度描述
    getDimensionDescription() {
      const dimensions = this.customReportForm.dimensions || []
      const descriptions = {
        'time': '时间维度',
        'merchant': '商户维度',
        'campaign': '活动维度',
        'user_type': '用户类型',
        'region': '地区维度'
      }
      return dimensions.map(d => descriptions[d] || d).join('、') || '无'
    },

    // 获取指标描述
    getMetricDescription() {
      const metrics = this.customReportForm.metrics || []
      const descriptions = {
        'count': '数量统计',
        'sum': '求和统计',
        'avg': '平均值',
        'rate': '转化率',
        'growth': '增长率',
        'max': '最大值',
        'min': '最小值'
      }
      return metrics.map(m => descriptions[m] || m).join('、') || '无'
    },

    // 兼容旧版本方法（保持向后兼容）
    loadData() {
      // 如果有配置且有结果，则重新生成报表
      if (this.customReportResult && this.validateCustomReportForm()) {
        this.handleGenerateCustomReport()
      }
    }
  }
}
</script>

<style scoped>
.custom-report {
  padding: 0;
}

/* 卡片基础样式 */
.custom-report .el-card {
  border: 1px solid #EBEEF5;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin-bottom: 20px;
}

.custom-report .el-card__header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 18px 20px;
  font-weight: 500;
  font-size: 16px;
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.custom-report .el-card__header .el-tooltip .el-icon-question {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  cursor: help;
  transition: color 0.3s ease;
}

.custom-report .el-card__header .el-tooltip .el-icon-question:hover {
  color: #ffffff;
}

.custom-report .el-card__body {
  padding: 24px;
  background: #fafbfc;
}

/* 表单样式优化 */
.custom-report .el-form {
  background: transparent;
  padding: 0;
  margin: 0;
}

.custom-report .el-form-item {
  margin-bottom: 24px;
}

.custom-report .el-form-item__label {
  font-weight: 500;
  color: #2c3e50;
  font-size: 14px;
  line-height: 1.5;
}

/* 输入框样式 */
.custom-report .el-input {
  border-radius: 6px;
}

.custom-report .el-input__inner {
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  padding: 12px 15px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.custom-report .el-input__inner:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

.custom-report .el-input-group__prepend {
  background: #667eea;
  color: white;
  border: 1px solid #667eea;
  border-radius: 6px 0 0 6px;
  font-size: 16px;
  padding: 0 12px;
}

/* 复选框组样式 */
.custom-report .el-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-top: 8px;
}

.custom-report .el-checkbox {
  margin-right: 0;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  background: white;
  transition: all 0.3s ease;
  min-width: 140px;
}

.custom-report .el-checkbox:hover {
  border-color: #667eea;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
}

.custom-report .el-checkbox.is-checked {
  border-color: #667eea;
  background: rgba(102, 126, 234, 0.05);
}

.custom-report .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #667eea;
  border-color: #667eea;
}

.custom-report .el-checkbox__label {
  font-size: 13px;
  color: #606266;
  font-weight: 400;
  padding-left: 8px;
}

/* 单选框组样式 */
.custom-report .el-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-top: 8px;
}

.custom-report .el-radio {
  margin-right: 0;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  background: white;
  transition: all 0.3s ease;
  min-width: 120px;
}

.custom-report .el-radio:hover {
  border-color: #667eea;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
}

.custom-report .el-radio.is-checked {
  border-color: #667eea;
  background: rgba(102, 126, 234, 0.05);
}

.custom-report .el-radio__input.is-checked .el-radio__inner {
  background-color: #667eea;
  border-color: #667eea;
}

.custom-report .el-radio__label {
  font-size: 13px;
  color: #606266;
  font-weight: 400;
  padding-left: 8px;
}

/* 按钮组样式 */
.custom-report .el-form-item:last-child {
  margin-bottom: 0;
  text-align: center;
  padding-top: 16px;
  border-top: 1px solid #ebeef5;
}

.custom-report .el-button {
  border-radius: 6px;
  padding: 12px 24px;
  font-weight: 500;
  margin: 0 8px;
  transition: all 0.3s ease;
}

.custom-report .el-button--primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.custom-report .el-button--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.custom-report .el-button--default {
  border: 1px solid #dcdfe6;
  color: #606266;
}

.custom-report .el-button--default:hover {
  border-color: #667eea;
  color: #667eea;
}

/* 结果卡片样式 */
.custom-report .el-card:last-child .el-card__header {
  background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
}

/* 工具提示样式优化 */
.custom-report .el-tooltip .el-icon-question {
  color: #909399;
  margin-left: 6px;
  cursor: help;
  font-size: 12px;
  transition: color 0.3s ease;
}

.custom-report .el-tooltip .el-icon-question:hover {
  color: #667eea;
}

/* 小白课堂 Tooltip 样式 */
.custom-report-tutorial-tooltip {
  max-width: 800px !important;
}

.custom-report-tutorial-tooltip .el-tooltip__popper {
  color: #374151 !important;
}

.tutorial-content-tooltip {
  color: #374151 !important;
}

.tutorial-content-tooltip * {
  color: inherit !important;
}

.tutorial-content-tooltip h3 {
  margin: 0 0 20px 0;
  color: #409EFF;
  font-size: 18px;
  text-align: center;
}

.tutorial-sections {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tutorial-section-tooltip {
  background: #FFFFFF;
  padding: 15px;
  border-radius: 8px;
  border-left: 4px solid #409EFF;
  border: 1px solid #E4E7ED;
}

.tutorial-section-tooltip h4 {
  margin: 0 0 12px 0;
  color: #1F2937;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tutorial-section-tooltip p {
  margin: 8px 0;
  color: #374151;
  line-height: 1.5;
  font-size: 13px;
}

.tutorial-section-tooltip ul {
  margin: 8px 0;
  padding-left: 18px;
}

.tutorial-section-tooltip li {
  margin: 4px 0;
  color: #374151;
  line-height: 1.4;
  font-size: 13px;
}

.tutorial-steps-tooltip {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.step-item-tooltip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.step-number-tooltip {
  background: linear-gradient(135deg, #409EFF, #67C23A);
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  flex-shrink: 0;
  margin-top: 1px;
}

.step-content-tooltip {
  flex: 1;
  font-size: 13px;
  line-height: 1.4;
  color: #374151;
}

.step-content-tooltip strong {
  color: #1F2937;
  margin-bottom: 4px;
  font-weight: 600;
}

.tag-tooltip {
  background: #3B82F6;
  color: #FFFFFF;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  margin: 0 2px;
}

.scenario-examples-tooltip {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.scenario-item-tooltip {
  background: #F0F9FF;
  padding: 12px;
  border-radius: 6px;
  border-left: 4px solid #0EA5E9;
  font-size: 12px;
  line-height: 1.5;
  color: #1E293B;
  border: 1px solid #E0F2FE;
}

.tutorial-tips-tooltip {
  background: #FEF3C7;
  padding: 12px;
  border-radius: 6px;
  border-left: 4px solid #F59E0B;
  margin-top: 15px;
  border: 1px solid #FDE68A;
}

.tutorial-tips-tooltip h4 {
  margin: 0 0 8px 0;
  color: #92400E;
  font-size: 13px;
  font-weight: 600;
}

.tutorial-tips-tooltip ul {
  margin: 0;
  padding-left: 16px;
}

.tutorial-tips-tooltip li {
  font-size: 12px;
  margin: 3px 0;
  color: #78350F;
  line-height: 1.4;
}

/* 图表容器样式 */
.custom-report #customReportChart {
  border-radius: 6px;
  background: white;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .custom-report .el-card__body {
    padding: 16px;
  }
  
  .custom-report .el-form-item {
    margin-bottom: 20px;
  }
  
  .custom-report .el-checkbox-group,
  .custom-report .el-radio-group {
    gap: 12px 16px;
  }
  
  .custom-report .el-checkbox,
  .custom-report .el-radio {
    min-width: 120px;
    padding: 6px 10px;
  }
  
  .custom-report .el-button {
    padding: 10px 16px;
    margin: 4px;
  }
  
  .custom-report #customReportChart {
    height: 300px !important;
  }
}

@media (max-width: 480px) {
  .custom-report .el-checkbox-group,
  .custom-report .el-radio-group {
    flex-direction: column;
    gap: 8px;
  }
  
  .custom-report .el-checkbox,
  .custom-report .el-radio {
    width: 100%;
    min-width: auto;
  }
  
  .custom-report .el-form-item:last-child {
    text-align: left;
  }
  
  .custom-report .el-button {
    width: 100%;
    margin: 4px 0;
  }
}

/* 加载状态样式 */
.custom-report .el-button.is-loading {
  pointer-events: none;
}

.custom-report .el-button.is-loading .el-icon-loading {
  margin-right: 6px;
}

/* 动画效果 */
.custom-report .el-card {
  transition: all 0.3s ease;
}

.custom-report .el-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* 深色主题兼容（可选） */
@media (prefers-color-scheme: dark) {
  .custom-report .el-card__body {
    background: #2d3748;
  }
  
  .custom-report .el-checkbox,
  .custom-report .el-radio {
    background: #4a5568;
    border-color: #718096;
  }
  
  .custom-report .el-checkbox__label,
  .custom-report .el-radio__label {
    color: #e2e8f0;
  }
}
</style>